<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>联系方式</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
		<meta http-equiv="expires" content="0">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/mui.picker.css" />
		<link rel="stylesheet" href="../css/mui.poppicker.css" />
		<link rel="stylesheet" href="../css/common.css" />
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			body {
				background-color: #FFFFFF;
			}
			.mui-content {
				background-color: #FFFFFF;
			}
			.info-div {
				width: 100%;
				background-color: #FFFFFF;
			}
			.item-div {
				margin: 0px 28px;
				height: 55px;
				position: relative;
			}
			.item-span {
				line-height: 55px;
				font-family: 'PingFangSC-Regular';
				font-size: 14px;
				color: #666666;
			}
			.item-icon {
				width: 20px;
				height: 20px;
				position: absolute;
				right: 0px;
				top: 22px;
			}
			.line-div {
				width: 100%;
				height: 1px;
				float: right;
				background-color: #F3F3F3;
			}
			input[type=text] {
				padding: 0px;
			    float: right;
	    			width: 65%;
				margin-bottom: 0;
				height: 55px; 
				border-width: 0px;
				color:#515151;
				font-size: 15px;
				background-color: transparent;
			}
			::-webkit-input-placeholder{
			    font-family: 'PingFangSC-Regular';
				font-size: 14px;
				color: #999999;
			}
			.right-div-container {
				display: inline-block;
				float: right;
				width: 65%;
			}
			.right-div {
				display: inline-block;
				float: right;
			}
			.right-span {
				line-height: 55px;
				font-size: 14px;
				color: #999999;
			}
			.choose-img {
				width: 32px;
				height: 32px;
				margin-top: 8px;
			}
			#agoAddr {
				display: none;
			}
			.left-div {
				display: inline-block;
				width: 33%;
				margin-top: 7px;
			}
			.left-item-span {
				font-family: 'PingFangSC-Regular';
				font-size: 14px;
				color: #666666;
				line-height: 20px;
			}
			.half {
				width: 65%;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">联系方式</h1>
		</header>
		<div class="mui-content">
			<div class="info-div">
				<div class="item-div">
					<span class="item-span">现居住国家</span>
					<input type="text" id="liveCountry" placeholder="请输入现居住国家" value="中国"/>
				</div>
				<div class="line-div"></div>
				<div class="item-div addrContainer">
					<span class="item-span">现居住地</span>
					<div class="right-div-container addrPicker">
						<span class="right-span addrResult" id="norAddrSpan">省  市  区</span>
						<div class="right-div">
							<img class="choose-img" src="../img/detail/down_color_icon.png" />
						</div>
					</div>
				</div>
				<div class="line-div half"></div>
				<div class="item-div">
					<span class="item-span"></span>
					<input type="text" id="nowDetailed" placeholder="详细地址（精确到门牌号）"/>
				</div>
				<div class="line-div"></div>
				<div id="isNow" class="item-div">
					<div class="left-div">
						<span class="left-item-span">户口所在地是否与居住地一致</span>
					</div>
					<div id="showIFPicker" class="right-div-container">
						<span class="right-span" id="nativeaddressIsNowaddress">是</span>
						<div class="right-div">
							<img class="choose-img" src="../img/detail/down_color_icon.png" />
						</div>
					</div>
				</div>
				<div class="line-div"></div>
			</div>
			<div id="agoAddr" class="info-div">
				<div class="item-div addrContainer">
					<span class="item-span">户口所在地</span>
					<div class="right-div-container addrPicker">
						<span class="right-span addrResult" id="agoAddrSpan">省  市  区</span>
						<div class="right-div">
							<img class="choose-img" src="../img/detail/down_color_icon.png" />
						</div>
					</div>
				</div>
				<div class="line-div half"></div>
				<div class="item-div">
					<span class="item-span"></span>
					<input type="text" id="nativeDetailed" placeholder="详细地址（精确到门牌号）"/>
				</div>
				<div class="line-div"></div>
			</div>
			<div class="info-div">
				<div class="item-div">
					<span class="item-span">手机号码</span>
					<input type="text" id="phoneNumber" placeholder="请输入手机号码"/>
				</div>
				<div class="line-div"></div>
				<div class="item-div">
					<span class="item-span">电子邮箱</span>
					<input type="text" id="email" placeholder="请输入电子邮箱"/>
				</div>
				<div class="line-div"></div>
			</div>
			<div class="transaction-container"><button type="button">保存</button></div>
		</div>
	</body>
	<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
	<script type="text/javascript" src="../js/utils/regular.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.picker.js"></script>
	<script type="text/javascript" src="../js/thirdparty/mui.poppicker.js"></script>
	<script type="text/javascript" src="../js/thirdparty/city.data.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/city.data-3.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/spin.min.js" ></script>
	<script type="text/javascript" src="../js/utils/boot.js" ></script>
	<script type="text/javascript">
		var customerId = base.getParameter("customerId");
		var applyCustomerId = base.getParameter("applyCustomerId");
		var userPicker = null;
		var addrPicker = null;
		var _getParam = function(obj, param) {
			return obj[param] || '';
		};
		(function($, doc) {
			$.init();
			getContactInfoData();
			$.ready(function() {
				//普通示例
				userPicker = new $.PopPicker();
				userPicker.setData([{
					value: '0',
					text: '否'
				}, {
					value: '1',
					text: '是'
				}]);
				addrPicker = new $.PopPicker({
					layer: 3
				});
				addrPicker.setData(cityData3);
			});
		})(mui, document);
		$("#isNow").on("tap", "#showIFPicker", function() {
			document.activeElement.blur();
			userPicker.show(function(items) {
				$("#nativeaddressIsNowaddress").html(_getParam(items[0], 'text'));
				if (_getParam(items[0], 'value') == 1) {
					$('#agoAddr').hide();
				} else {
					$('#agoAddr').show();
				}
			});
		})
		$(".addrContainer").on("tap", ".addrPicker", function() {
			document.activeElement.blur();
			var _self = $(this);
			addrPicker.show(function(items) {
				var areaName = _getParam(items[0], 'text')  + "-" + _getParam(items[1], 'text')  + "-" + _getParam(items[2], 'text');
				_self.find(".addrResult").text(areaName);
				//返回 false 可以阻止选择框的关闭
				//return false;
			});
		})
		function getContactInfoData() {
			var url = base.url.getContactInfo;
			base.postData(url, {applyCustomerId: applyCustomerId}, getContactInfoSuccess)
		}
		function getContactInfoSuccess(data) {
			if (data.success) {
				$("#liveCountry").val(data.extendData.liveCountry);
				$("#norAddrSpan").text(data.extendData.nowProvince+'-'+data.extendData.nowCity+'-'+data.extendData.nowArea);
				$("#nowDetailed").val(data.extendData.nowDetailed);
				$("#nativeaddressIsNowaddress").text(getWhetherStr(data.extendData.nativeaddressIsNowaddress));
				$("#phoneNumber").val(data.extendData.phoneNumber);
				$("#email").val(data.extendData.email);
				if (data.extendData.nativeaddressIsNowaddress == 0) {
					$("#agoAddr").show();
					$("#agoAddrSpan").text(data.extendData.nativeProvince+'-'+data.extendData.nativeCity+'-'+data.extendData.nativeArea);
					$("#nativeDetailed").val(data.extendData.nativeDetailed);
				}
			} else {
				mui.toast(data.message);
			}
		}
		$(".transaction-container").on("tap", "button", function() {
			var url = base.url.updateVisaApplyCustomerInfo;
			var _norAddrSpan = '';
			if ($("#norAddrSpan").text().indexOf("-")!=-1) {
				_norAddrSpan = $("#norAddrSpan").text().split("-");
			}
			var _agoAddrSpan = "";
			if ($("#agoAddrSpan").text().indexOf("-")!=-1) {
				_agoAddrSpan = $("#agoAddrSpan").text().split("-");
			}
			var params = {
				applyCustomerId: applyCustomerId,
				nativeaddressIsNowaddress: getWhetherValue($("#nativeaddressIsNowaddress").text()),
				liveCountry: $("#liveCountry").val(),
				nowProvince: _norAddrSpan!=''?_norAddrSpan[0]:_norAddrSpan,
				nowCity: _norAddrSpan!=''?_norAddrSpan[1]:_norAddrSpan,
				nowArea: _norAddrSpan!=''?_norAddrSpan[2]:_norAddrSpan,
				nowDetailed: $("#nowDetailed").val(),
				
				nativeProvince: _agoAddrSpan!=''?_agoAddrSpan[0]:_agoAddrSpan,
				nativeCity: _agoAddrSpan!=''?_agoAddrSpan[1]:_agoAddrSpan,
				nativeArea: _agoAddrSpan!=''?_agoAddrSpan[2]:_agoAddrSpan,
				nativeDetailed: $("#nativeDetailed").val(),
				email: $("#email").val(),
				phoneNumber: $("#phoneNumber").val(),
			}
			base.postData(url, params, function(data) {
				mui.toast(data.message);
				if (data.success) {
					setTimeout(function(){
						mui.back();
					}, 1000);
				}
			});
		})
	</script>
</html>